<template>
    <Drawer title="权限设置" :closable="true" v-model="drawer"  @askData="askData" width="90%">
        <table>
            <thead>
                <tr>
                <th style="width:200px;text-align: center;"> 模块</th>
                <th style="text-align: center;">权限</th>
                </tr>
            </thead>
            <tbody  v-for="item in powerkList">
                <tr >
                    <td  style="width:200px">
                        <div class="ivu-mt-8 ivu-ml-10" :key="item.value" >
                            <span >{{item.title}}</span>
                        </div>
                        <table  v-for="ite in item.children" class="childrentable">
                           <tbody>
                               <tr>
                                   <td>
                                       <div class="ivu-mt-8 ivu-ml-16" >
                                            <span>{{ite.title}}</span>
                                        </div>
                                   </td>
                               </tr>
                            </tbody>
                        </table>
                    </td>
                    <td >
                        <div  class="ivu-mt-8" style="  height: 40px;">
                            <Checkbox
                            :indeterminate="item.indeterminate"
                            :value="item.checkAll"
                            @click.prevent.native="handleCheckAll(item)"></Checkbox>
                        </div>
                         <table  v-for="ite in item.children" class="childrentable">
                           <tbody>
                               <tr>
                                   <td>
                                       <div class="ivu-mt-8 ivu-ml-16" >
                                            <CheckboxGroup v-model="item.selectaction" v-for="it in ite.action_list" :key="it.value"  @on-change="checkAllGroupChange" >
                                                <Checkbox :label="it.value">{{it.title}}</Checkbox>
                                            </CheckboxGroup>
                                        </div>
                                   </td>
                               </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
            </tbody>
            </table>
        <!-- <template v-for="item in powerkList">
            <div class="ivu-mt-8" :key="item.value" >
                <span class="ivu-mr-8">{{item.title}}</span>
                <span>
                    <Checkbox
                    :indeterminate="item.indeterminate"
                    :value="item.checkAll"
                    @click.prevent.native="handleCheckAll(item)"></Checkbox>
                </span>
            </div>
            <template v-for="ite in item.children">
                <div :key="ite.value" class="ivu-mt-16 ivu-ml-16" >
                    <Row :gutter="16" type="flex" align="middle">
                        <Col span="4" ><span>{{ite.title}}</span></Col>
                        <Col span="20" >
                            <CheckboxGroup v-model="item.selectaction" v-for="it in ite.action_list" :key="it.value"  @on-change="checkAllGroupChange" >
                                <Checkbox :label="it.value">{{it.title}}</Checkbox>
                            </CheckboxGroup>
                        </Col>
                    </Row>
                </div>
            </template>
        </template> -->
        <Row :gutter="16" type="flex" align="middle" justify="end">
            <Col><Button style="margin-right: 8px" @click="drawer=false">取消</Button></Col>
            <Col><Button type="primary" @click="submitedit">保存</Button></Col>
        </Row>
    </Drawer>
</template>
<script>
    import { getRoleInfo, rolePreSet } from '@/api/powersetting.js';
    export default {
        data () {
            return {
                drawer: false,
                modalparams: { id: 0, action_ids: [], menu_ids: [], module_ids: [] },
                powerkList: []
            }
        },
        methods: {
            initial (row) {
                this.drawer = true
                this.modalparams = { id: row.id, action_ids: [], menu_ids: [], module_ids: [] };
                this.askData(row)
            },
            askData (row) {
                getRoleInfo({ id: row.id, type: 1 }).then((res) => {
                    this.powerkList = res.auth.map(item => {
                        return { ...item, selectaction: [], allaction: [], _showChildren: true }
                    })
                    for (let item of this.powerkList) {
                        for (let its of item.children) {
                            for (let it of its.action_list) {
                                item.allaction.push(it.value)
                                if (res.action_ids.indexOf(it.value) > -1) {
                                    item.selectaction.push(it.value)
                                }
                            }
                        }
                    }
                })
            },
            handleCheckAll (item) {
                if (item.indeterminate || (!item.indeterminate && item.checkAll)) {
                    item.indeterminate = false
                    item.checkAll = false
                    item.selectaction = []
                } else {
                    item.indeterminate = false
                    item.checkAll = true
                    item.children.forEach(res => {
                        res.action_list.forEach(items => {
                            if (item.selectaction.indexOf(items.value) <= -1) {
                                item.selectaction.push(items.value)
                            }
                        })
                    })
                }
            },
            selectactionfun (item) {
                if (item.allaction.length == item.selectaction.length) {
                    item.indeterminate = false
                    item.checkAll = true
                } else if (item.selectaction.length == 0) {
                    item.indeterminate = false
                    item.checkAll = false
                } else {
                    item.indeterminate = true
                    item.checkAll = false
                }
            },
            checkAllGroupChange () {
                this.powerkList.forEach(res => {
                    this.selectactionfun(res)
                })
            },
            // 提交数据
            submitedit () {
                let action_ids = []
                let menu_ids = []
                let module_ids = []
                this.powerkList.forEach(res => {
                    if (res.selectaction.length) {
                        action_ids.push(...res.selectaction)
                        module_ids.push(res.value)
                        res.children.forEach(item => {
                            item.action_list.forEach(items => {
                                if (res.selectaction.indexOf(items.value) > -1) {
                                    menu_ids.push(item.value)
                                }
                            })
                        })
                    }
                })
                this.modalparams.action_ids = Array.from(new Set(action_ids))
                this.modalparams.menu_ids = Array.from(new Set(menu_ids))
                this.modalparams.module_ids = Array.from(new Set(module_ids))
                let params = {
                    id: this.modalparams.id,
                    module_ids: this.modalparams.module_ids.join(','),
                    action_ids: this.modalparams.action_ids.join(','),
                    menu_ids: this.modalparams.menu_ids.join(',')
                }
                rolePreSet(params).then(() => {
                    this.$Message.success('授权成功')
                    this.drawer = false
                })
            }
        }
    }
</script>
<style scoped>
.demo-drawer-footer{
    width: 100%;
    position: absolute;
    /* top: 0; */
    bottom: 0;
    left: 0;
    border-top: 1px solid #e8e8e8;
    padding: 10px 30px;
    text-align: right;
    /* background: #fff; */
    }
/deep/.ivu-checkbox-group{
    display: inline-block;
}
table {
  width: 100%;
  /* margin: 200px; */
  text-align: left;
  border: 1px solid #797979;
  /* 合并边框 */
  border-collapse: collapse;
  /* 设置内部表格宽度有效 */
  table-layout: fixed;
  /* 允许长单词换行到下一行 */
  word-wrap: break-word;
  /* 在恰当的断字点进行换行 - 允许单词内换行 */
  word-break: break-all;
}
th {
  height: 40px;
  border: 1px solid #797979;
}
td {
  height: 40px;
  border: 1px solid #797979;
}
.childrentable{
    border-right: none;
    border-left: none;
}
.childrentable td {
  height: 40px;
  border: none;
}
.childrentable th {
  height: 40px;
  border: none;
}
</style>
